---
import { type BlogSchema } from "../content/config";
import BaseLayout from "./BaseLayout.astro";
import dayjs from "dayjs";
import localizedFormat from "dayjs/plugin/localizedFormat";

export interface Props extends BlogSchema {}

const { title, description, pubDate, updatedDate, heroImage, badge, tags = [] } = Astro.props;
dayjs.extend(localizedFormat);
const displayDate = dayjs(pubDate).format("ll")
import { Image } from "astro:assets";
---

<BaseLayout title={title} description={description} image={heroImage}>
  <main class="md:flex md:justify-center">
    <article class="prose prose-lg max-w-[750px] prose-img:mx-auto">
      {heroImage && <Image width={750} height={422} format="webp" src={heroImage} alt={title} class="w-full mb-6" />}
      <h1 class="title my-2 text-4xl font-bold">{title}</h1>
      {pubDate && <time>{displayDate}</time>}
      <br />
      {badge && <div class="badge badge-secondary my-1">{badge}</div>}
      {
        tags &&
          tags.map((tag) => (
            <a href={`/blog/tag/${tag}`} class="badge badge-outline ml-2 no-underline">
              {tag}
            </a>
          ))
      }
      {
        updatedDate && (
          <div>
            {" "}
            Last updated on <time>{updatedDate}</time>{" "}
          </div>
        )
      }
      <div class="divider my-2"></div>
      <slot />
    </article>
  </main>
</BaseLayout>
